* {
  padding: 0;
  margin: 0;
}

img {
  vertical-align: middle;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: #000000;
}

div {
  box-sizing: border-box;
}

li {
  cursor: pointer;
  /* transition: all .5s; */
}

input {
  outline: none;
  box-sizing: border-box;
  padding-left: 2em;
}

button{
  outline: none;
  cursor: pointer;
}

.App{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-flow: column;
}

.header{
  width: 100vw;
  height: 8vh;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
input{
  width: 80vw;
  height: 5vh;
  border-radius: 20px;
}
.main{
  flex: 1;
  overflow: scroll;

  background-color: rgb(209, 250, 190);
  display: flex;
  flex-flow: column;
}
.main .uu{
  flex:1;
  box-sizing: border-box;
  padding: 0 5vw ;
}
.main .uu li{
  height: 8vh;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main .uu li input{
  flex: 1;
  height: 16px;
}
.main .uu li span{
  margin-left: 2vw;
  flex: 6;
}
.main .uu li button{
  flex: 1;
}





.tab{
  width: 100vw;
  height: 10vh;
  
}
.tab ul {
  width: 100vw;
  height: 10vh;
  display: flex;
}
.tab ul li{
  height: 10vh;
  flex: 1;
  background-color: rgb(126, 191, 252);
  line-height: 10vh;
  text-align: center;
  font-weight: bold;
  color: indigo;
  border-right: 1px solid #cccccc;
  transition: all .5s;
}
.tab ul li:hover{
  color: orangered;
  background: linear-gradient(to left top,red , blue,yellow);
}

